<template>
  <div class="login-container">
    <div class="operations">
    </div>
    <div class="login-bg">
      <div class="login-content">
        <div class="login-box">
          <div class="title">
            <div class="text-[28px] text-[rgb(var(--text-color))] font-[600] leading-[28px]">
              登录
            </div>
          </div>
          <div class="info">
            <input v-model="username" class="login-input mb-[10px]" placeholder="用户名"/>
            <div class="password-container">
              <input
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                class="login-input"
                placeholder="密码"
              />
              <div class="toggle-password" @click="showPassword = !showPassword">
                <i class="iconfont" :class="showPassword ? 'icon-yincang' : 'icon-chakan'"></i>
              </div>
            </div>
          </div>
          <div @click="onLogin" :class="['login-button', { logging: logging }]">
            {{ !logging ? '登 录' : '请 等 待' }}
          </div>
          <div class="register-link" @click="router.push('/register')">
            没有账号？去注册
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import Input from '@/components/Input.vue'
import { useToast } from '@/components/ToastProvider.vue'
import { useRouter } from 'vue-router'
import LoginApi from '@/api/login.js'
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
import ChatList from '@/api/chatList.js'
const userInfoStore = useUserInfoStore()
const router = useRouter()
const logging = ref(false)
const username = ref('')
const password = ref('')
const showToast = useToast()
const showPassword = ref(false)
const onLogin = () => {
  if (!username.value) {
    showToast('用户名不能为空~', true)
    return
  }
  if (!password.value) {
    showToast('密码不能为空~', true)
    return
  }
  logging.value = true
  LoginApi.login({ name: username.value, password: password.value })
    .then((res) => {
      if (res.code === 0) {
        localStorage.setItem('x-token', res.data.token)
        userInfoStore.setUserInfo({
          userId: res.data.userId,
          userName: res.data.userName,
          password: res.data.password,
          avatar: res.data.avatar,
        })
          router.push('/')
      } else {
        showToast(res.msg, true)
      }
    })
    .catch((res) => {
      showToast(res.message, true)
    })
    .finally(() => {
      logging.value = false
    })
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  background: var(--screen-bg-color);

  .password-container {
    position: relative;
    width: 100%;
  }

  .toggle-password {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
    color: rgba(var(--text-color), 0.5);
    font-size: 20px;
    user-select: none;

    &:hover {
      color: rgb(var(--primary-color));
    }
  }

  .register-link {
    margin-top: 15px;
    font-size: 14px;
    color: rgb(var(--primary-color));
    cursor: pointer;
    text-align: center;
    &:hover {
      text-decoration: underline;
    }
  }
  .operations {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    @media screen and (max-height: 500px) {
      display: none;
    }
  }

  .login-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease;
  }

  .login-input:focus {
    border-color: rgb(var(--primary-color));
  }

  .login-bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image:
      linear-gradient(225deg, #ffffff, #ff6ec7),
      linear-gradient(135deg, #ffffff, #007BFF);

    background-size: cover;
    background-blend-mode: soft-light;
  }


  .login-content {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 50px 50px;
    flex-direction: column;

    .web-info {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ababab;
      @media screen and (max-height: 500px) {
        display: none;
      }
    }

    .login-box {
      width: 400px;
      height: 360px;
      border-radius: 10px;
      background-image: linear-gradient(
        130deg,
        rgba(var(--background-color), 0.3),
        rgba(var(--background-color), 0.5)
      );
      backdrop-filter: blur(10px);
      border: rgba(var(--background-color), 0.5) 3px solid;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px 30px;

      @media screen and (max-width: 1000px) {
        width: 95%;
        padding: 30px 20px;
      }

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }

      .info {
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .login-button {
        width: 100%;
        height: 50px;
        font-size: 24px;
        font-weight: 600;
        color: #ffffff;
        background-color: rgb(var(--primary-color));
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;

        &.logging,
        &:hover {
          background-color: rgba(76, 155, 255, 0.8);
        }
      }
    }
  }
}
</style>
